import React, { useState, useEffect } from 'react';
import { Base } from '../base';
import { useStep } from 'use/step';
import { useScan } from 'use/scan';
import { get_path, StepDes } from 'base/ctl/base';
import { MainMenu } from 'base/ctl/menu';
import { Time } from 'base/ctl/base';
import { Title } from 'base/ctl/title';
import { DlgLog } from 'base/ctl/log';
import { DlgInput } from 'client/sort/ctl/ctl';
import { g_wsn, g_db } from 'db/state';
import { NuiBt } from 'sui';
import { loc } from 'local/index.js';
import { clear_info } from 'use/info';
import { DlgTag, lst_yn } from 'base/ctl/box';
import { load_lub } from 'client/goods/in/cmd';

const fix_esop = () => {
    return [
        {stepcode: 117, stepdes: <div>扫描<span className="text-red-600">轴承</span>码</div>},
    ];
};

const ClientView = ({ umd, wsn, mod }) => {
    const [open_tag, openTag] = useState(false);
    const [open_menu, openMenu] = useState(false);
    const [open_input, openInput] = useState(false);
    const [open_log, openLog] = useState(false);
    const [lst_lub, lstLub] = useState();
    const [map_tag, mapTag] = useState();

    useScan(wsn, umd);

    useEffect(() => {
        if (!wsn) {
            return;
        }

        umd.setEsop(fix_esop());
        load_lub(lstLub, mapTag);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [wsn]);

    const hfin = () => {
        umd.clear();
        clear_info();
    };

    const menu = [{
        label: "重新开始",
        name: "clear",
        hcmd: () => hfin(),
    }, {
        label: "输入条码",
        name: "input",
        hcmd: () => openInput(true),
    }, {
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    const sealName = () => {
        if (!lst_yn) {
            return "";
        }

        const seal = g_db.seal();
        const f = lst_yn.find(d => d.id === seal);
        if (f) {
            return f.des;
        }

        return "";
    };

    const lubName = () => {
        if (!lst_lub) {
            return "";
        }

        const lub = g_db.lub();
        const f = lst_lub.find(d => d.id === lub);
        if (f) {
            return f.name;
        }

        return "";
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between">
                <div className="inline-flex">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <Title sub="打印标签码" value={g_wsn()} width="w-40"/>
                    <Title value={sealName()} sub="密封圈" width="w-32"/>
                    <Title value={lubName()} sub="润滑类型" width="w-56"/>
                </div>
                <div className="inline-flex items-center">
                    <Time/>
                    <NuiBt className="mt-1 mr-4 w-px-next" hcmd={() => openTag(true)}>
                        <div className="text-2xl">设置</div>
                    </NuiBt>
                </div>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div className="inline-flex justify-between mt-4 mr-1">
                        <StepDes umd={umd}/>
                    </div>
                    <div className="w-full mr-2 border border-white rounded bg-white justify-between">
                        <div className="ml-2 font-bold text-xl text-red-600 h-12">{umd.get("err")}</div>
                    </div>
                    <div className="flex-row ml-20">
                        <div className="inline-flex mt-8">
                            <Title value={umd.get("psn")} sub="轴承码" width="w-64"/>
                            <Title value={umd.get("tech")} sub="型号" width="w-64"/>
                            <Title value={umd.get("outdia")} sub="D" width="w-32"/>
                            <Title value={umd.get("india")} sub="d" width="w-32"/>
                            <Title value={umd.get("outwidth")} sub="C" width="w-32"/>
                            <Title value={umd.get("standout")} sub="b" width="w-32"/>
                        </div>
                        <Title value={umd.get("qr")} sub="二维码" width="w-px-600" className="mt-4"/>
                    </div>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
            <DlgInput open={open_input} setOpen={openInput}/>
            <DlgTag open={open_tag} setOpen={openTag} lst_lub={lst_lub} umd={umd} map_tag={map_tag}/>
        </div>
    );
};

const TagClient = ({ pathname, mod }) => {
    const [line, wsn] = get_path(pathname, mod);
    const umd = useStep(line, wsn);

    if (g_db.is_stop_scan()) {
        g_db.start_scan();
    }

    return (
        <Base wsn={wsn} line={line}>
            <ClientView umd={umd} wsn={wsn}/>
        </Base>
    );
};

export {TagClient};
